<html>
<head>
    <title>Timeline JSON data</title>

    <style type="text/css">
        body {
            font-size: 10pt;
            font-family: verdana, sans, arial, sans-serif;
        }
    </style>

    <script type="text/javascript" src="../timeline.js"></script>
    <link rel="stylesheet" type="text/css" href="../timeline.css">

    <script type="text/javascript">
        var timeline;
        var data;

        // Called when the Visualization API is loaded.
        function drawVisualization() {
            // Create a JSON data table
            data = [
                {
                    'start': new Date(2010,7,23),
                    'content': 'Conversation<br><img src="img/comments-icon.png" style="width:32px; height:32px;">'
                },
                {
                    'start': new Date(2010,7,23,23,0,0),
                    'content': 'Mail from boss<br><img src="img/mail-icon.png" style="width:32px; height:32px;">'
                },
                {
                    'start': new Date(2010,7,24,16,0,0),
                    'content': 'Report'
                },
                {
                    'start': new Date(2010,7,26),
                    'end': new Date(2010,8,2),
                    'content': 'Traject A'
                },
                {
                    'start': new Date(2010,7,28),
                    'content': 'Memo<br><img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'
                },
                {
                    'start': new Date(2010,7,29),
                    'content': 'Phone call<br><img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'
                },
                {
                    'start': new Date(2010,7,31),
                    'end': new Date(2010,8,3),
                    'content': 'Traject B'
                },
                {
                    'start': new Date(2010,8,4,12,0,0),
                    'content': 'Report<br><img src="img/attachment-icon.png" style="width:32px; height:32px;">'
                }
            ];

            // specify options
            var options = {
                'width':  '100%',
                'height': '300px',
                'editable': true,   // enable dragging and editing events
                'style': 'box'
            };

            // Instantiate our timeline object.
            timeline = new links.Timeline(document.getElementById('mytimeline'), options);

            function onRangeChanged(properties) {
                document.getElementById('info').innerHTML += 'rangechanged ' +
                        properties.start + ' - ' + properties.end + '<br>';
            }

            // attach an event listener using the links events handler
            links.events.addListener(timeline, 'rangechanged', onRangeChanged);

            // Draw our timeline with the created data and options
            timeline.draw(data);
        }
    </script>
</head>

<body onload="drawVisualization();">
<h1>Timeline JSON data</h1>
<p>
    This demo shows how to feed the Timeline with JSON data.
    No Google DataTable is used, and therefore the Google JSAPI is
    not needed by the Timeline, which can thus be used offline.
</p>

<div id="mytimeline"></div>

<!-- Information about where the used icons come from -->
<p style="color:gray; font-size:10px; font-style:italic;">
    Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
    and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
</p>

<div id="info"></div>

</body>
</html>
